<template>
    <TresGroup :scale="curScale">
        <!-- 球体 -->
        <TresMesh :renderOrder="2200">
            <TresSphereGeometry
                :args="[props.radius, 64, 64, 0, Math.PI * 2, 0, Math.PI / 2]"
            />
            <TresMeshBasicMaterial
                :side="THREE.DoubleSide"
                transparent
                :map="textures[0]"
                :color="ballColor"
                :opacity="opacity"
            />
        </TresMesh>

        <!-- 圆柱墙 -->
        <TresMesh :renderOrder="2201" :position="[0, props.radius * 0.3, 0]">
            <TresCylinderGeometry
                :args="[props.radius * 1.02, props.radius * 1.02, props.radius * 0.6, 32, 1, true]"
                :openEnded="true"
            />
            <TresMeshBasicMaterial
                :side="THREE.DoubleSide"
                transparent
                :map="textures[1]"
                :color="wallColor"
                :opacity="opacity"
            />
        </TresMesh>
    </TresGroup>
</template>

<script setup lang="ts">
import { useLoop } from '@tresjs/core'
import { useTextures } from '@tresjs/cientos'
import * as THREE from 'three'
import { ref, watch } from 'vue'

const props = withDefaults(
    defineProps<{
        radius?: number
        ballColor?: string
        wallColor?: string
        speed?: number
    }>(),
    {
        radius: 100,
        ballColor: '#ffff00',
        wallColor: '#ffffff',
        speed: 1,
    },
)

// --- 新写法 useTextures ---
const { textures, isLoading } = useTextures([
    './plugins/digitalCity/image/diffuseCircle1.png',
    './plugins/digitalCity/image/diffuseCircle2.png',
])

watch([textures, isLoading], ([texs, loading]) => {
    if (texs && !loading) {
        // 设置 offset
        texs[1].offset.set(0.5, 0.5)
    }
})

// --- 动态缩放 & 透明度 ---
const curScale = ref(0)
const opacity = ref(1)

// --- 新写法 useLoop ---
const { onBeforeRender } = useLoop()
onBeforeRender(({ delta }) => {
    if (curScale.value > 1) {
        curScale.value = 0
    }
    curScale.value += delta * props.speed
    opacity.value = 1.4 - curScale.value
})
</script>
